<template>
	<view>
		<view class="search-top">
			<lb-picker class="flex-row lb-picker"
			  v-model="month"
			  :list="monthList"
			  @confirm="handleConfirm">
			  <view class="picker">
			  	<input class="value flex-1" placeholder-class="placeholder" :value="month" disabled placeholder="请选择" />
			  </view>
			</lb-picker>
			<view class="search-button" @tap="getData">查询</view>
		</view>
		<view class="uni-container">
			<view class="table-title">
				<text class="tt">烟台桦圣信息科技有限公司</text>
				<text class="tt">冷库门开启情况分析表</text>
			</view>
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="80" align="center">设备id</uni-th>
					<uni-th width="100" align="center">设备名称</uni-th>
					<uni-th width="100" align="center">总次数</uni-th>
					<uni-th width="100" align="center">大于3分钟次数</uni-th>
					<uni-th width="100" align="center">小于3分钟次数</uni-th>
					<uni-th width="100" align="center">异常次数</uni-th>
					<uni-th width="100" align="center">开启频率0-5次</uni-th>
					<uni-th width="100" align="center">开启频率6-10次</uni-th>
					<uni-th width="100" align="center">开启频率11-15次</uni-th>
					<uni-th width="100" align="center">开启频率15次以上</uni-th>
					<uni-th width="100" align="center">统计月份</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{item.id}}</uni-td>
					<uni-td align="center">{{item.deviceName}}</uni-td>
					<uni-td align="center">{{item.total}}</uni-td>
					<uni-td align="center">{{item.dyCondition}}</uni-td>
					<uni-th align="center">{{item.xyCondition}}</uni-th>
					<uni-th align="center">{{item.errorCount}}</uni-th>
					<uni-th align="center">{{item.openCountOne}}</uni-th>
					<uni-th align="center">{{item.openCountTwo}}</uni-th>
					<uni-th align="center">{{item.openCountThree}}</uni-th>
					<uni-th align="center">{{item.openCountFour}}</uni-th>
					<uni-th align="center">{{item.recordMonth}}</uni-th>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				month: '',
				monthList: [],
				tableData: [],
				loading: false
			}
		},
		onLoad(e) {
			this.getMonth()
		},
		methods: {
			getMonth() {
				this.$api.get('work/awbDoorRecord/getMonthList').then(res => {
					this.monthList = res.result
					this.month = this.monthList[0]
					this.getData()
				})
			},
			handleConfirm(e){
				this.month = e.value
			},
			// 获取数据
			getData() {
				this.loading = true
				this.$api.get('work/awbDoorRecord/list', {
					month: this.month,
				}).then(res => {
					this.tableData = res.result
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-top{
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
	}
	.search-button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		padding: 20rpx;
		color: #ffffff;
		background-color: $uni-background-red;
		border-radius: 12rpx;
	}
	.lb-picker{
		margin-bottom: 20rpx;
		background: #F2F2F2;
		.picker{
			width: 670rpx;
			padding: 20rpx;
			padding-left: 30rpx;
			padding-right: 40rpx;
			position: relative;
			box-sizing: border-box;
			&::after{
				content: '';
				position: absolute;
				right: 28rpx;
				top: 28rpx;
				width: 16rpx;
				height: 16rpx;
				border: 0;
				border-right: 2rpx;
				border-bottom: 2rpx;
				border-style: solid;
				border-color: #A2A2A4;
				transform: rotate(45deg);
				transform-origin: 17.5rpx 17.5rpx;
			}
		}
		.value{
			font-size: 28rpx;
			color: #333333;
		}
		.placeholder{
			font-size: 28rpx;
			color: #A2A2A4;
		}
		.flex-1{
			flex: 1;
		}
	}
	.uni-container{
		padding: 10rpx;
	}
	.table-title{
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tt{
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 10rpx;
			&+.tt{
				margin-bottom: 0;
			}
		}
	}
</style>
